<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{width:100%;height:100%;}
        *{margin:0;padding:0;}
        a{text-decoration:none;}
        ul,li{list-style: none;margin:0;padding:0;}

        .box{
            width:1000px;height:580px;margin:80px auto; border:1px solid red; background:#fff;position:relative;
        }
        .left{
            width:406px;height:565px;position: absolute;top:0;left:0;
            background:url("imgs/3.jpg") no-repeat center center;
        }
        .left ul{
            width: 406px;height: 565px;position: absolute;top:0;left:406px;z-index: 22;
        }
        .left ul li{
            width:100%;height:100%;position:absolute;top:0;z-index: 22;
        }
        .left ul li img{
            width:100%;height:100%;
        }
        .title{
            width:406px;height:142px;position:absolute;top:0;left:406px;background: rgba(172,30,64,0.6);
        }
        .title h1{ font-family:"Times New Roman","微软雅黑", "宋体", Arial, Tahoma; text-align:left; font-size:24px; float:left; width:91%; height:35px; line-height:35px; padding-left:9%; margin-top:20px; position:relative; }
        .title h2{ font-family:"Times New Roman","微软雅黑", "宋体", Arial, Tahoma; text-align:center; font-size:14px; float:left;height:25px; line-height:25px;padding-left:9%; position:relative;}
        .right{
            width:594px;height:547px;background:#6FF;position: absolute;top:0;right:0;
        }
        .right ul{
            width:594px;height:565px;top:0;left:0;background: #fff;
        }
        .right ul li{
            float:left;width:118px;height:565px;display: inline;position: relative;
        }
        .right ul li img{width:100%;height:142px;position: absolute;left:0;right: 0;top:-142px;display:none;z-index:24;}
        .liContent{position:absolute;left:0;top:142px;width:118px;height:423px;text-align: center;display:none;}
        .liBk0{ background:#716058 }
        .liBk1{ background:#fceabc }
        .liBk2{ background:#eaa000;}
        .liBk3{ background:#557da4;}
        .liBk4{ background:#cc9966;}
    </style>
</head>
<body style="background:#666">
    <div class="box">
        <!--左边-->
        <div class="left">
            <div class="title"><h1>Dear Sky</h1><h2>This is a new world</h2></div>
            <ul>
                <li style="display:block"><img src="imgs/1.jpg" alt=""></li>
                <li><img src="imgs/2.jpg" alt=""></li>
                <li><img src="imgs/1.jpg" alt=""></li>
                <li><img src="imgs/2.jpg" alt=""></li>
                <li><img src="imgs/1.jpg" alt=""></li>
            </ul>
        </div>
        <!--右边-->
        <div class="right">
            <ul>
                <li><img class="liImg" src="imgs/4.jpg" alt=""><div class="liContent liBk0">11</div></li>
                <li><img class="liImg" src="imgs/5.jpg" alt=""><div class="liContent liBk1">22</div></li>
                <li><img class="liImg" src="imgs/6.jpg" alt=""><div class="liContent liBk2">33</div></li>
                <li><img class="liImg" src="imgs/7.jpg" alt=""><div class="liContent liBk3">44</div></li>
                <li><img id="lastImg" class="liImg" src="imgs/8.jpg" alt=""><div class="liContent liBk4">55</div></li>
            </ul>
        </div>
    </div>
</body>
<script src="jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function(e){
//  载入动画
    $('.left').find('ul').delay(90).animate({left:0},700,'easeOutSine',function(){
        rightImg()
    })
    function rightImg() {
        $('.right').find('.liImg').first().fadeIn(90).animate({top:0,opacity:1},380,'easeOutSine',function myNext() {
            $(this).parent().next().find('.liImg').fadeIn(90).animate({top:0,opacity:1},420,'easeOutSine',myNext)
            if($('.right').find('#lastImg').is(':animated')&&$('.right').find('#lastImg').css('top','0')){
                $('.title').css('z-index',23).fadeIn(90).animate({left:0},2000,'easeOutSine',function(){
                    $('.right').find('li').hover(function(){
                        $(this).find('.liContent').slideDown().show().animate({opacity:0.8},'slow')
                    },function(){
                        $(this).find('.liContent').stop(true,false).slideUp().hide()
                    })
                })
            }
        })
    }
//    tab切换效果
    var liNum = $('.right').find('li').size()
    $('.right').on('click','li',function(){
        var index = $(this).index()
        $('.left').find('li').eq(index).fadeIn(1250).siblings().fadeOut(800).end().add('.title').fadeIn(1500)
        var myClassName = 'liBk' + index
        function setTitleClass(myClassName){
            $('.title').each(function(){
                this.className = ("title "+myClassName+"")
            })
        }
        setTitleClass(myClassName)
    })
})
</script>
</html>